<script setup name="tree">
	import tree from './tree.vue'
	const props = defineProps({
		data: {
			type: Array,
			default: () => []
		},
		value: {
			type: Number,
			default: 0
		}
	})
	const emit = defineEmits(['changeExpand', 'clicKNode'])
	
	function changeExpand(item) {
		emit("changeExpand", {label: item.label, value: item.value})
	}
	function clicKNode(item) {
		emit("clicKNode", {label: item.label, value: item.value})
	}
</script>

<template>
	<view class="com-container">
		<view v-for="item in data" :key="item.value" class="tree-box">
			<view class="tree-item">
				<text :class="['arrow-left', item.expand? 'arrow-rotate' : '']" @click.stop="changeExpand(item)" v-if="item.children"></text>
				<text class="tree-icon" v-else></text>
				<text :class="['tree-label', item.value === value? 'active' : '']" @click.stop="clicKNode(item)">{{item.label}}</text>
			</view>
			<view class="child-item" v-if="item.children && item.expand">
				<tree :data="item.children" :value="value" @clicKNode="clicKNode" @changeExpand="changeExpand"></tree>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.com-container{
		padding-left: 28rpx;
		.tree-box{
			.tree-item{
				height: 50rpx;
				display: flex;
				align-items: center;
				.arrow-left{
					padding-right: 16rpx;
					width: 0;
					height: 0;
					border-left: 10rpx solid black;
					border-top: 10rpx solid  transparent;
					border-bottom: 10rpx solid transparent;
					transition: transform .3s;
					&.arrow-rotate{
						transform: rotate(90deg);
						transform-origin: 25% 50%;
					}
				}
				.tree-icon{
					width: 28rpx;
				}
				.tree-label{
					width: calc(100% - 28rpx);
					color: #333333;
					&.active{
						color: #FA3F00;
					}
				}
			}
			.child-item{
				animation: move 0.5s;
			}
		}
		@keyframes move {
			0% {
				opacity: 0;
				margin-top: -20rpx;
			}

			100% {
				opacity: 1;
				margin-top: 0rpx;
			}
		}
	}
</style>